<template>
	<div class="login-body">
			<el-form class="login-box" :model="loginForm" :rules="loginRule" v-loading="loading" ref="loginForm"  label-position="left" label-width="0px">
               <h3 class="title" >后台管理系统</h3>
				<el-form-item prop="account">
				   <el-input type="text" v-model="loginForm.account" auto-complete="off" placeholder="账号"></el-input>
				</el-form-item>
				<el-form-item prop="pwd">
				   <el-input type="password" v-model="loginForm.pwd" auto-complete="off" placeholder="密码"></el-input>
				</el-form-item>
				<el-form-item prop="code">
				   <el-input type="text" v-model="loginForm.code" auto-complete="off" placeholder="验证码"></el-input>
				   <img :src="img_src" height=38 width=130 @click.stop="getCodeImage" />
				</el-form-item>
				<el-form-item style="width:100%;">
				  <el-button type="primary" style="width:100%;" @click.native.prevent="doLogin" >登录</el-button>
				</el-form-item>
          </el-form>
	</div>
</template>

<script>
import * as api from '../api/index'
import {menuRoute} from '../lib/function'
  export default {
    data() {
      return {
		    img_src:'',
        loading: false,
        loginForm: {
          account:'',
          pwd:'',
		      code:'',
        },
        loginRule: {
          account: [
            { required: true, message: '请输入账号', trigger: 'blur' }
          ],
          pwd: [
            { required: true, message: '请输入密码', trigger: 'blur' }
          ],
				  code: [
		            { required: true, message: '请输入验证码', trigger: 'blur' }
		          ]
          }
      }
    },
    methods: {
      doLogin() {
        this.$refs.loginForm.validate((valid) => {
          if(valid) {
						  this.loading = true;
						  api.login(this.loginForm,res=>{//登录
							    if(res.status==1){
											sessionStorage.setItem('user',JSON.stringify(res.data));
											this.getMenu();
								 }else{
											this.$message(res);
										  this.getCodeImage();
											this.loading = false;
								 }
						    });
          } else {
            return false;
          }
        });
      },
			getCodeImage(){
				api.getCodeImage({r:Math.random()},res=>{
					 if(res.status==1) this.img_src=res.data;
				});
			},
	  getMenu(){
			let menu=sessionStorage.getItem('menu');
			if(menu){
				this.$router.replace('/');//路由跳转
			}else{
				api.getMenu({},res=>{
					if(res.status==1){
						sessionStorage.setItem('menu',JSON.stringify(res.data));
						this.$router.addRoutes([menuRoute(res.data)]);
						this.$router.replace('/');//路由跳转
					}else {
						sessionStorage.removeItem('user');
						this.$notify(res);
						this.loading = false;
					}
			  });
			}
	  }
    },
		created(){
			this.img_src=this.getCodeImage();
		}
	/*beforeCreate(){
		let logout=sessionStorage.getItem('logout');
		if(logout) {
			sessionStorage.removeItem('logout');
			location.reload();//清空数据
		}
	}*/
  }
</script>
<style scoped>
.login-body{
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  width:100%;
  height:100%;
  background:url(../assets/login.jpg) no-repeat center;
  background-size:110% 100%;
  }
.login-box{
     position:fixed;
	 width:286px;
	 height:346px;
	 overflow:hidden;
	 left:50%;
	 top:50%;
	 margin-top:-219px;
	 margin-left:-189px;
	 padding:46px;
	background:url(../assets/login-bg.png) no-repeat center;
  }
.login-box h3.title {
	  font-size:24px;color:#fffefe;
	  font-weight:normal;
	  margin-bottom: 40px;
      text-align: center;
      color: #fff;
    }
form img{position:absolute;right:1px;top:1px}
</style>
